<template>
  <div class="album-list">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <el-table
        :data="admins"
        border
        highlight-current-row
        height="650"
        style="width: 100%">
      <el-table-column
          type="index"
          label="id"
          align="center"
          width="80">
      </el-table-column>
      <el-table-column
          prop="avatar"
          align="center"
          label="头像">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
          prop="username"
          align="center"
          label="用户名">
      </el-table-column>
      <el-table-column
          prop="roles"
          :show-overflow-tooltip="true"
          align="center"
          label="角色">
        <template slot-scope="scope">
          <span v-for="(str,index) in scope.row.roles">
            {{ str }}
            <span v-if="index===(scope.row.roles.length-1)"></span>
            <span v-else>、</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column
          prop="nickname"
          align="center"
          label="昵称">
      </el-table-column>
      <el-table-column
          prop="phone"
          align="center"
          label="手机号码">
      </el-table-column>
      <el-table-column
          prop="email"
          align="center"
          label="邮箱">
      </el-table-column>
      <el-table-column
          prop="description"
          :show-overflow-tooltip="true"
          align="center"
          label="简介">
      </el-table-column>
      <el-table-column
          align="center"
          label="配置角色">
        <template slot-scope="scope">
          <el-button type="text" @click="listRole(scope.row.id)">配置角色</el-button>
        </template>
      </el-table-column>
      <el-table-column
          prop="description"
          align="center"
          label="是否启用">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.enable"
                active-color="#13ce66"
                @change="change(scope.row)"
                :active-value="1"
                :inactive-value="0">
            </el-switch>
          </template>
      </el-table-column>
      <el-table-column
          width="200"
          fixed="right"
          align="center"
          label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="handleEdit(scope.$index, scope.row)"></el-button>
          <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              :disabled="scope.row.enable===1"
              circle
              @click="handleDelete(scope.$index, scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="修改管理员" :visible.sync="dialogFormVisible">
      <el-form :model="adminEdit" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="adminEdit.username"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="adminEdit.nickname"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="adminEdit.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="adminEdit.email"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="adminEdit.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="配置角色" :visible.sync="dialogForRole">
      <el-tree
          node-key="id"
          default-expand-all
          :data="roles"
          :props="defaultProps"
          :default-checked-keys="defaultCheckedKey"
          show-checkbox
          @check="handleCheck">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForRole = false">取 消</el-button>
        <el-button type="primary" @click="submitRole">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import CommonUtils from "@/views/utils/CommonUtils";

export default {
  name: "AdminListView",
  data() {
    return {
      admins: [], //管理员列表
      dialogFormVisible: false,
      dialogForRole: false,
      adminEdit: {},
      roles: [], //角色列表
      adminId: '', //当前操作的角色id
      defaultProps: {
        label: 'name'
      },
      defaultCheckedKey: [], //默认选中的节点数据id
      checkedRoleIds: [], //被选中的节点数据id
    }
  },
  methods: {
    handleEdit(index, row) {
      axios
          .create(this.getJwt())
          .get("http://localhost:8000/admins/"+row.id).then((res)=>{
        let data = res.data;
        if (data.state === 20000){
          this.adminEdit = data.data;
          this.dialogFormVisible = true;
        }else {
          this.$message.error(data.message);
        }
      })
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios
            .create(this.getJwt())
            .delete("http://localhost:8000/admin/"+row.id).then((res)=> {
              let data = res.data;
              if (res.data.state===20000){
                location.reload();
              }else {
                this.$message.error(data.message);
              }
            })
      }).catch(() => {
        this.$message.info("已取消删除");
      });
    },
    update(){
      let formData = this.qs.stringify(this.adminEdit);
      axios
          .create(this.getJwt())
          .put("http://localhost:8000/admins/"+this.adminEdit.id,formData).then((res)=> {
            let data = res.data;
            if (data.state === 20000){
              this.dialogFormVisible = false;
              location.reload();
              return;
            }
            CommonUtils.methods.isFail(data);
          })
    },
    change(row){
      let url = "http://localhost:8000/admins/"
      if (row.enable === 1){
        url += "enable/"+row.id;
      }else if (row.enable === 0){
        url += "disable/"+row.id;
      }
      axios
          .create(this.getJwt())
          .put(url).then((res)=>{
            let data = res.data;
            if (data.state === 20000){
              location.reload();
            }else {
              this.$message.error(data.message);
            }
          })
    },
    listRole(id){
      this.defaultCheckedKey = null; //清除缓存中默认显示的tree节点key
      axios //获取所有角色列表
          .create(this.getJwt())
          .get("http://localhost:8000/roles/list").then((res)=>{
            let data = res.data;
            if (data.state === 20000){
              this.roles = data.data;
              axios //获取当前用户拥有的角色列表
                  .create(this.getJwt())
                  .get("http://localhost:8000/admins/role/"+id).then((res)=>{
                    let data = res.data;
                    if (data.state === 20000){
                      this.defaultCheckedKey = data.data; //获取默认选择的角色id列表
                      this.dialogForRole = true; //显示配置角色界面
                      this.adminId = id; //定义当前管理员id
                      this.checkedRoleIds = this.defaultCheckedKey;
                      return;
                    }
                    CommonUtils.methods.isFail(data,this);
                  })
                }
          })
    },
    handleCheck(data,treeObj){
      //获取当前被选中的节点数据id
      this.checkedRoleIds = treeObj.checkedKeys;
    },
    submitRole(){
      axios //配置角色
          .create(this.getJwt())
          .put("http://localhost:8000/admins/role/"+this.adminId,this.checkedRoleIds).then((res)=>{
            let data = res.data;
            if (data.state === 20000){
              this.dialogForRole = false;
              location.reload();
              return;
            }
            CommonUtils.methods.isFail(data,this);
      })
    },
    getJwt(){
      return {'headers':{'Authorization': localStorage.getItem("jwt")}};
    }
  },
  mounted() {
    this.axios
        .create(this.getJwt())
        .get('http://localhost:8000/admins/list').then((res) => {
          let data = res.data;
          if (data.state === 20000){
            this.admins = data.data;
            return;
          }
          CommonUtils.methods.isFail(data,this);
        })
  }
}
</script>

<style>
 .album-list{
   width: 1450px;
 }
</style>